<template>
  <v-app>
    <v-navigation-drawer
      v-model="drawer"
      app
      elevation="1"
      :permanent="$vuetify.display.mdAndUp"
      width="256"
    >
      <v-list density="comfortable" nav>
        <v-list-subheader class="text-caption">分类</v-list-subheader>
        <v-list-item
          v-for="s in sections"
          :key="s.key"
          :active="selected === s.key"
          rounded="lg"
          @click="selected = s.key"
        >
          <v-list-item-title>{{ s.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar app color="transparent" flat>
      <v-app-bar-nav-icon class="d-md-none" @click="drawer = !drawer" />
      <v-toolbar-title>Vuetify 常用样式（Helpers）示例</v-toolbar-title>
      <v-spacer />
      <v-btn icon :title="isDark ? '切换到浅色' : '切换到深色'" variant="text" @click="toggleTheme">
        <v-icon :icon="isDark ? mdiWeatherNight : mdiWhiteBalanceSunny" />
      </v-btn>
    </v-app-bar>

    <v-main>
      <v-container class="py-4" fluid>
        <v-alert class="mb-4" type="info" variant="tonal">
          本页以示例方式展示常用 Vuetify 3
          工具类（不含组件属性）。你可以直接复制下面每个方块上的类名到你的代码中。
        </v-alert>

        <!-- Typography -->
        <v-card v-if="selected === 'typography'" class="mb-6" variant="outlined">
          <v-card-title>排版与文字（Typography）</v-card-title>
          <v-card-text>
            <div class="d-flex flex-column ga-3">
              <div class="typo-row">
                <div class="text-h4">标题 H4 / Abc 123</div>
                <div class="chip">text-h4</div>
              </div>
              <div class="typo-row">
                <div class="text-subtitle-1">副标题 Subtitle-1 / Abc 123</div>
                <div class="chip">text-subtitle-1</div>
              </div>
              <div class="typo-row">
                <div class="text-body-1">正文 Body-1 / Abc 123</div>
                <div class="chip">text-body-1</div>
              </div>
              <div class="typo-row">
                <div class="text-caption">注释 Caption / Abc 123</div>
                <div class="chip">text-caption</div>
              </div>
              <div class="d-flex align-center ga-3 flex-wrap">
                <div class="chip font-weight-light">font-weight-light</div>
                <div class="chip font-weight-medium">font-weight-medium</div>
                <div class="chip font-weight-bold">font-weight-bold</div>

                <div class="chip text-truncate" style="max-width: 220px">
                  text-truncate 很长很长的文本展示
                </div>
              </div>
            </div>
            <div class="text-caption mt-4 mb-1">文本强调（Emphasis）</div>
            <div class="d-flex align-center ga-3 flex-wrap">
              <div class="chip text-high-emphasis">text-high-emphasis</div>
              <div class="chip text-medium-emphasis">text-medium-emphasis</div>
              <div class="chip text-disabled">text-disabled</div>
            </div>

            <div class="text-caption mt-4 mb-1">更多字号</div>
            <div class="d-flex flex-column ga-3">
              <div class="typo-row">
                <div class="text-h5">标题 H5 / Abc 123</div>
                <div class="chip">text-h5</div>
              </div>
              <div class="typo-row">
                <div class="text-h6">标题 H6 / Abc 123</div>
                <div class="chip">text-h6</div>
              </div>
              <div class="typo-row">
                <div class="text-subtitle-2">副标题 Subtitle-2 / Abc 123</div>
                <div class="chip">text-subtitle-2</div>
              </div>
              <div class="typo-row">
                <div class="text-body-2">正文 Body-2 / Abc 123</div>
                <div class="chip">text-body-2</div>
              </div>
            </div>

            <div class="text-caption mt-4 mb-1">超大字号（H1 ~ H3）</div>
            <div class="d-flex flex-column ga-3">
              <div class="typo-row">
                <div class="text-h3">标题 H3 / Abc 123</div>
                <div class="chip">text-h3</div>
              </div>
              <div class="typo-row">
                <div class="text-h2">标题 H2 / Abc 123</div>
                <div class="chip">text-h2</div>
              </div>
              <div class="typo-row">
                <div class="text-h1">标题 H1 / Abc 123</div>
                <div class="chip">text-h1</div>
              </div>
            </div>

            <div class="text-caption mt-4 mb-1">对齐（Alignment）</div>
            <div class="d-flex align-center ga-3 flex-wrap">
              <div class="chip text-start" style="width: 150px">text-start</div>
              <div class="chip text-center" style="width: 150px">text-center</div>
              <div class="chip text-end" style="width: 150px">text-end</div>
            </div>

            <div class="text-caption mt-4 mb-1">文本修饰（Decoration）</div>
            <div class="d-flex align-center ga-3 flex-wrap">
              <div class="chip text-decoration-underline">text-decoration-underline</div>
              <div class="chip text-decoration-overline">text-decoration-overline</div>
              <div class="chip text-decoration-line-through">text-decoration-line-through</div>
              <a class="chip text-decoration-none" href="javascript:void(0)"
                >text-decoration-none</a
              >
            </div>

            <div class="text-caption mt-4 mb-1">大小写与样式（Transform & Italic）</div>
            <div class="d-flex align-center ga-3 flex-wrap">
              <div class="chip text-lowercase">text-lowercase ABC</div>
              <div class="chip text-uppercase">text-uppercase Abc</div>
              <div class="chip text-capitalize">text-capitalize abc def</div>
              <div class="chip text-none">text-none Abc</div>
              <div class="chip font-italic">font-italic</div>
              <div class="chip font-weight-thin">font-weight-thin</div>
              <div class="chip font-weight-black">font-weight-black</div>
            </div>

            <div class="text-caption mt-4 mb-1">换行与溢出（Wrapping）</div>
            <div class="d-flex align-center ga-3 flex-wrap">
              <div class="chip" style="max-width: 160px">
                <span class="text-no-wrap">text-no-wrap 很长很长很长文本</span>
              </div>
              <div class="chip" style="max-width: 160px">
                <span class="text-break">text-break VeryVeryLongLongWord</span>
              </div>
              <div class="chip" style="max-width: 160px">
                <span class="text-truncate" style="display: inline-block; max-width: 140px"
                  >text-truncate 很长很长很长文本</span
                >
              </div>
            </div>

            <div class="text-caption mt-4 mb-1">更多变体（Button / Overline）</div>
            <div class="d-flex flex-column ga-3">
              <div class="typo-row">
                <div class="text-button">按钮 Button / Abc 123</div>
                <div class="chip">text-button</div>
              </div>
              <div class="typo-row">
                <div class="text-overline">Overline / Abc 123</div>
                <div class="chip">text-overline</div>
              </div>
            </div>
          </v-card-text>
        </v-card>

        <!-- Colors -->
        <v-card v-if="selected === 'colors'" class="mb-6" variant="outlined">
          <v-card-title>主题颜色（Colors）</v-card-title>
          <v-card-text>
            <div class="text-caption mb-2">背景（bg-*）</div>
            <div class="d-flex flex-wrap ga-4 mb-4">
              <div class="swatch bg-background">bg-background</div>
              <div class="swatch bg-surface">bg-surface</div>
              <div class="swatch bg-surface-variant">bg-surface-variant</div>
              <div class="swatch bg-primary">bg-primary</div>
              <div class="swatch bg-secondary">bg-secondary</div>
              <div class="swatch bg-success">bg-success</div>
              <div class="swatch bg-info">bg-info</div>
              <div class="swatch bg-warning">bg-warning</div>
              <div class="swatch bg-error">bg-error</div>
            </div>
            <div class="text-caption mb-2">文本（text-*）</div>
            <div class="d-flex flex-wrap ga-3">
              <div class="chip text-primary">text-primary</div>
              <div class="chip text-secondary">text-secondary</div>
              <div class="chip text-success">text-success</div>
              <div class="chip text-info">text-info</div>
              <div class="chip text-warning">text-warning</div>
              <div class="chip text-error">text-error</div>
            </div>
          </v-card-text>
        </v-card>

        <!-- Spacing -->
        <v-card v-if="selected === 'spacing'" class="mb-6" variant="outlined">
          <v-card-title>间距（Spacing：ma-/pa-、mx-/my-/px-/py- 等）</v-card-title>
          <v-card-text>
            <div class="text-caption mb-2">外边距（margin）</div>
            <div class="pa-2 rounded">
              <div class="box ma-0">ma-0</div>
              <div class="box ma-2">ma-2</div>
              <div class="box ma-4">ma-4</div>
              <div class="box ma-8">ma-8</div>
              <div class="box mx-4">mx-4</div>
              <div class="box my-4">my-4</div>
            </div>
            <div class="text-caption mt-6 mb-2">内边距（padding）</div>
            <div class="d-flex flex-wrap ga-4">
              <div class="pad-demo pa-0"><div class="content">pa-0</div></div>
              <div class="pad-demo pa-2"><div class="content">pa-2</div></div>
              <div class="pad-demo pa-4"><div class="content">pa-4</div></div>
              <div class="pad-demo pa-8"><div class="content">pa-8</div></div>
              <div class="pad-demo px-6"><div class="content">px-6</div></div>
              <div class="pad-demo py-6"><div class="content">py-6</div></div>
            </div>
          </v-card-text>
        </v-card>

        <!-- Display -->
        <v-card v-if="selected === 'display'" class="mb-6" variant="outlined">
          <v-card-title>显示（Display：d-flex / d-block / d-inline-flex / d-none）</v-card-title>
          <v-card-text>
            <div class="text-caption mb-2">与文本混排演示</div>
            <div class="display-line">
              文字A <span class="display-demo d-inline">d-inline</span> 文字B
            </div>
            <div class="display-line">
              文字A <span class="display-demo d-inline-flex">d-inline-flex</span> 文字B
            </div>
            <div class="display-line">
              文字A <span class="display-demo d-block">d-block</span> 文字B
            </div>
            <div class="text-caption mt-3">d-none：元素隐藏（此处不显示）</div>
            <div class="text-caption text-medium-emphasis">
              响应式：如 d-none d-md-flex（在较大屏幕显示）
            </div>
          </v-card-text>
        </v-card>

        <!-- Flex & Alignment -->
        <v-card v-if="selected === 'flex'" class="mb-6" variant="outlined">
          <v-card-title>弹性布局与对齐（Flex & Alignment）</v-card-title>
          <v-card-text>
            <div class="text-caption mb-2">常见对齐</div>
            <div class="d-flex ga-4 flex-wrap">
              <div class="flex-demo">
                <div class="text-caption text-medium-emphasis mb-1">
                  d-flex justify-start align-center
                </div>
                <div class="d-flex justify-start align-center">
                  <div class="pill">A</div>
                  <div class="pill">B</div>
                  <div class="pill">C</div>
                </div>
              </div>
              <div class="flex-demo">
                <div class="text-caption text-medium-emphasis mb-1">
                  d-flex justify-center align-center
                </div>
                <div class="d-flex justify-center align-center">
                  <div class="pill">A</div>
                  <div class="pill">B</div>
                  <div class="pill">C</div>
                </div>
              </div>
              <div class="flex-demo">
                <div class="text-caption text-medium-emphasis mb-1">
                  d-flex justify-end align-center
                </div>
                <div class="d-flex justify-end align-center">
                  <div class="pill">A</div>
                  <div class="pill">B</div>
                  <div class="pill">C</div>
                </div>
              </div>
              <div class="flex-demo">
                <div class="text-caption text-medium-emphasis mb-1">
                  d-flex justify-space-between align-center
                </div>
                <div class="d-flex justify-space-between align-center">
                  <div class="pill">A</div>
                  <div class="pill">B</div>
                  <div class="pill">C</div>
                </div>
              </div>
              <div class="flex-demo">
                <div class="text-caption text-medium-emphasis mb-1">
                  d-flex flex-column justify-center
                </div>
                <div class="d-flex flex-column justify-center">
                  <div class="pill">1</div>
                  <div class="pill">2</div>
                  <div class="pill">3</div>
                </div>
              </div>
            </div>
          </v-card-text>
        </v-card>

        <!-- Elevation -->
        <v-card v-if="selected === 'elevation'" class="mb-6" variant="outlined">
          <v-card-title>阴影（Elevation：elevation-0 ~ elevation-24）</v-card-title>
          <v-card-text>
            <div class="d-flex flex-wrap ga-4">
              <div class="elev box pa-4 elevation-0">elevation-0</div>
              <div class="elev box pa-4 elevation-2">elevation-2</div>
              <div class="elev box pa-4 elevation-6">elevation-6</div>
              <div class="elev box pa-4 elevation-12">elevation-12</div>
              <div class="elev box pa-4 elevation-24">elevation-24</div>
            </div>
          </v-card-text>
        </v-card>

        <!-- Rounded -->
        <v-card v-if="selected === 'rounded'" class="mb-6" variant="outlined">
          <v-card-title>圆角（Rounded）</v-card-title>
          <v-card-text>
            <div class="d-flex flex-wrap ga-4 align-center">
              <div class="swatch bg-surface rounded-0">rounded-0</div>
              <div class="swatch bg-surface rounded-sm">rounded-sm</div>
              <div class="swatch bg-surface rounded">rounded</div>
              <div class="swatch bg-surface rounded-lg">rounded-lg</div>
              <div class="swatch bg-surface rounded-xl">rounded-xl</div>
              <div class="swatch bg-surface rounded-pill">rounded-pill</div>
            </div>
          </v-card-text>
        </v-card>

        <!-- Overflow -->
        <v-card v-if="selected === 'overflow'" class="mb-6" variant="outlined">
          <v-card-title>溢出（Overflow）</v-card-title>
          <v-card-text>
            <div class="d-flex ga-4 flex-wrap">
              <div class="overflow-box overflow-hidden">
                overflow-hidden
                <div class="long">这是一段很长很长的内容这是一段很长很长的内容</div>
              </div>
              <div class="overflow-box overflow-auto">
                overflow-auto
                <div class="long">这是一段很长很长的内容这是一段很长很长的内容</div>
              </div>
            </div>
          </v-card-text>
        </v-card>

        <!-- Sizing -->
        <v-card v-if="selected === 'sizing'" class="mb-6" variant="outlined">
          <v-card-title>尺寸（Sizing：w-/h- 系列）</v-card-title>
          <v-card-text>
            <div class="d-flex ga-4 flex-wrap align-end">
              <div class="size-demo w-25">w-25</div>
              <div class="size-demo w-50">w-50</div>
              <div class="size-demo w-75">w-75</div>
              <div class="size-demo w-100">w-100</div>
              <div class="size-demo h-100" style="height: 60px">h-100（父容器限制）</div>
            </div>
          </v-card-text>
        </v-card>

        <!-- Position -->
        <v-card v-if="selected === 'position'" class="mb-6" variant="outlined">
          <v-card-title>定位（Position）</v-card-title>
          <v-card-text>
            <div class="text-caption mb-2">
              position-relative + 绝对定位四角（top/right/bottom/left-0）
            </div>
            <div class="position-sandbox position-relative bg-surface-variant rounded pa-4">
              <div
                class="pos-tag position-absolute top-0 left-0"
                style="
                  background-color: rgb(var(--v-theme-primary));
                  color: rgb(var(--v-theme-on-primary));
                "
              >
                absolute top-0 left-0
              </div>
              <div
                class="pos-tag position-absolute top-0 right-0"
                style="
                  background-color: rgb(var(--v-theme-success));
                  color: rgb(var(--v-theme-on-success));
                "
              >
                absolute top-0 right-0
              </div>
              <div
                class="pos-tag position-absolute bottom-0 left-0"
                style="
                  background-color: rgb(var(--v-theme-warning));
                  color: rgb(var(--v-theme-on-warning));
                "
              >
                absolute bottom-0 left-0
              </div>
              <div
                class="pos-tag position-absolute bottom-0 right-0"
                style="
                  background-color: rgb(var(--v-theme-secondary));
                  color: rgb(var(--v-theme-on-secondary));
                "
              >
                absolute bottom-0 right-0
              </div>
              <div class="text-caption text-medium-emphasis">容器：position-relative</div>
            </div>

            <div class="text-caption mt-4 mb-2">position-sticky（在容器滚动内吸顶）</div>
            <div class="rounded pa-4 bg-surface-variant" style="max-height: 180px; overflow: auto">
              <div
                class="pos-tag position-sticky top-0"
                style="
                  background-color: rgb(var(--v-theme-primary));
                  color: rgb(var(--v-theme-on-primary));
                "
              >
                sticky top-0
              </div>
              <div v-for="i in 8" :key="i" class="text-body-2 my-4">
                这是一段示例内容（{{ i }}）用于滚动观察 sticky 效果。
              </div>
            </div>

            <div class="text-caption mt-4 mb-2">position-fixed（相对视口固定）</div>
            <div class="text-caption text-medium-emphasis mb-2">
              示例：右下角固定标签（仅在查看“定位”分类时显示）
            </div>
            <div
              v-if="selected === 'position'"
              class="pos-tag position-fixed bottom-0 right-0"
              style="
                background-color: rgb(var(--v-theme-secondary));
                color: rgb(var(--v-theme-on-secondary));
                right: 16px;
                bottom: 16px;
                pointer-events: none;
              "
            >
              fixed bottom-0 right-0
            </div>
          </v-card-text>
        </v-card>

        <v-card class="mb-6" variant="outlined">
          <v-card-title>Helper CSS 清单（按分类）</v-card-title>
          <v-card-text>
            <v-expansion-panels multiple>
              <v-expansion-panel v-for="s in sections" :key="s.key">
                <v-expansion-panel-title>{{ s.title }}</v-expansion-panel-title>
                <v-expansion-panel-text>
                  <div class="d-flex align-center justify-end mb-2">
                    <v-btn size="small" variant="text" @click.stop="copySection(s.key)">
                      <v-icon
                        class="mr-1"
                        :icon="copiedKey === s.key ? mdiCheck : mdiContentCopy"
                      />
                      {{ copiedKey === s.key ? '已复制' : '复制该分类' }}
                    </v-btn>
                  </div>
                  <pre class="text-caption" style="white-space: pre-wrap; user-select: text">{{
                    cheatMap[s.key]
                  }}</pre>
                </v-expansion-panel-text>
              </v-expansion-panel>
            </v-expansion-panels>
          </v-card-text>
        </v-card>

        <div class="text-caption text-medium-emphasis">
          注：类名以项目当前 Vuetify 版本（^3.10）为准，可能随版本升级而变化。
        </div>
      </v-container>
    </v-main>
  </v-app>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { useTheme } from 'vuetify'
import { mdiCheck, mdiContentCopy, mdiWeatherNight, mdiWhiteBalanceSunny } from '@mdi/js'
import cssTypography from './cheatsheet/typography.css?raw'
import cssColors from './cheatsheet/colors.css?raw'
import cssSpacing from './cheatsheet/spacing.css?raw'
import cssDisplay from './cheatsheet/display.css?raw'
import cssFlex from './cheatsheet/flex.css?raw'
import cssElevation from './cheatsheet/elevation.css?raw'
import cssRounded from './cheatsheet/rounded.css?raw'
import cssOverflow from './cheatsheet/overflow.css?raw'
import cssSizing from './cheatsheet/sizing.css?raw'
import cssPosition from './cheatsheet/position.css?raw'

const cheatMap: Record<string, string> = {
  typography: cssTypography,
  colors: cssColors,
  spacing: cssSpacing,
  display: cssDisplay,
  flex: cssFlex,
  elevation: cssElevation,
  rounded: cssRounded,
  overflow: cssOverflow,
  sizing: cssSizing,
  position: cssPosition
}

const copiedKey = ref<string | null>(null)
async function copySection(key: string) {
  try {
    await navigator.clipboard.writeText(cheatMap[key] ?? '')
    copiedKey.value = key
    setTimeout(() => (copiedKey.value = null), 1500)
  } catch (error) {
    console.warn('copy failed', error)
  }
}

type SectionKey =
  | 'typography'
  | 'colors'
  | 'spacing'
  | 'display'
  | 'flex'
  | 'elevation'
  | 'rounded'
  | 'overflow'
  | 'sizing'
  | 'position'

const sections: { key: SectionKey; title: string }[] = [
  { key: 'typography', title: '排版与文字' },
  { key: 'colors', title: '主题与颜色' },
  { key: 'spacing', title: '间距' },
  { key: 'display', title: '显示（Display）' },
  { key: 'flex', title: '弹性布局与对齐' },
  { key: 'elevation', title: '阴影（Elevation）' },
  { key: 'rounded', title: '圆角（Rounded）' },
  { key: 'overflow', title: '溢出（Overflow）' },
  { key: 'sizing', title: '尺寸（Sizing）' },
  { key: 'position', title: '定位（Position）' }
]

const selected = ref<SectionKey>('typography')
const drawer = ref(true)

const theme = useTheme()
const isDark = computed(() => theme.global.current.value.dark)
function toggleTheme() {
  theme.cycle()
}
</script>

<style scoped>
.sticky-nav {
  position: sticky;
  top: 12px;
}
.label {
  padding: 6px 10px;
  background: rgba(var(--v-theme-surface-variant), 1);
  border-radius: 8px;
}
.box {
  min-width: 120px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--v-theme-surface), 1);
  border: 1px dashed rgba(var(--v-theme-on-surface), 0.3);
  border-radius: 8px;
}
.elev {
  background: rgba(var(--v-theme-surface), 1);
  border-radius: 8px;
}
.swatch {
  width: 140px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--v-theme-on-surface));
  border-radius: 10px;
}
.chip {
  padding: 6px 10px;
  border: 1px solid rgba(var(--v-theme-on-surface), 0.2);
  border-radius: 9999px;
  background: rgba(var(--v-theme-surface), 1);
}
.flex-demo {
  width: 260px;
  min-height: 64px;
  padding: 6px;
  border-radius: 8px;
  border: 1px dashed rgba(var(--v-theme-on-surface), 0.3);
}
.pill {
  padding: 2px 10px;
  margin: 0 4px;
  border-radius: 9999px;
  background: rgba(var(--v-theme-primary), 0.15);
  color: rgb(var(--v-theme-primary));
}
.overflow-box {
  width: 220px;
  height: 72px;
  padding: 8px;
  border-radius: 8px;
  border: 1px dashed rgba(var(--v-theme-on-surface), 0.3);
}
.long {
  width: 400px;
}
.size-demo {
  min-width: 120px;
  min-height: 40px;
  border: 1px dashed rgba(var(--v-theme-on-surface), 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--v-theme-surface), 1);
  border-radius: 8px;
}
.position-sandbox {
  height: 140px;
}
.typo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(var(--v-theme-surface), 1);
  padding: 8px 12px;
  border-radius: 8px;
}

.pad-demo {
  width: 160px;
  height: 80px;
  border: 1px dashed rgba(var(--v-theme-on-surface), 0.3);
  border-radius: 8px;
  background: rgba(var(--v-theme-surface), 1);
}
.pad-demo .content {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: rgba(var(--v-theme-primary), 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.display-line {
  margin-bottom: 8px;
}
.display-demo {
  background: rgba(var(--v-theme-primary), 0.15);
  border: 1px dashed rgba(var(--v-theme-primary), 0.5);
  padding: 2px 8px;
  border-radius: 6px;
}
.pos-tag {
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
</style>
